<template>
  <div class="historyOrder">
    <van-pull-refresh
      v-model="refreshing"
      head-height="200"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了~"
        @load="onLoad"
      >
        <!-- 订单卡片 -->
        <div
          class="orderCard"
          v-for="item in historyOrderList"
          :key="item.orderId"
        >
          <div class="header">
            <div class="left">
              <div class="storeName">{{ item.store.storeName }}</div>
              <div class="endTime">{{ item.date }}</div>
            </div>
            <div class="right" @click="toDetail(item)">
              <div v-if="item.state == 2">
                已完成<i class="iconfont icon-youjiantou1"></i>
              </div>
              <div v-else-if="item.state == 1">
                已取消<i class="iconfont icon-youjiantou1"></i>
              </div>
              <div v-else>待支付<i class="iconfont icon-youjiantou1"></i></div>
            </div>
          </div>
          <div
            class="main"
            v-for="(commodity, index) in item.commodityList"
            :key="index"
          >
            <div class="left">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                :src="commodity.imgUrl"
              />
            </div>
            <div class="middle">
              <div class="font16">{{ commodity.commodityName }}</div>
              <div class="font_gray11">{{ commodity.properties }}</div>
            </div>
            <div class="right">
              <div class="price">￥{{ commodity.price }}</div>
              <div class="count">共{{ commodity.count }}件</div>
            </div>
          </div>
          <div class="footer">
            <div class="left">
              <div>
                共<span class="bold16">{{ totalCount(item) }}</span
                >件
              </div>
              <div>
                ￥<span class="bold16">{{ item.totalPrice }}</span>
              </div>
            </div>
            <div class="right">再来一单</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import orderApi from "@/api/order";
import Vue from "vue";
import { Image as VanImage, Overlay, PullRefresh, Toast, List } from "vant";

Vue.use(VanImage).use(Overlay).use(PullRefresh).use(Toast).use(List);
export default {
  name: "historyOrder",
  props: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      historyOrderList: [],
    };
  },
  mounted() {
    this.getHistoryOrders();
  },
  computed: {
    storeInfo() {
      return this.$store.getters.storeInfo;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.historyOrderList = [];
          this.refreshing = false;
        }

        // for (let i = 1; i < 3; i++) {
        //   this.historyOrderList.push({
        //     orderId: i,
        //     storeName: "温州财富中心店",
        //     endTime: "2021-02-23 14:03:30",
        //     state: 2,
        //     totalPrice: 56.8,
        //     totalCount: 2,
        //     commoditys: [
        //       {
        //         img: require("@/assets/img/commodity/ahuatianbobo.jpg"),
        //         commodityName: "热超厚蛋糕阿华田波波",
        //         attributes: "PLA可降解吸管，热，不另外加糖(推荐)，标准(推荐)",
        //         price: 28,
        //         count: 1,
        //       },
        //       {
        //         img: require("@/assets/img/commodity/niuruyunibobo.jpg"),
        //         commodityName: "热超厚蛋糕阿华田波波",
        //         attributes: "PLA可降解吸管，热，不另外加糖(推荐)，标准(推荐)",
        //         price: 28,
        //         count: 1,
        //       },
        //     ],
        //   });
        // }
        this.loading = false;
        this.finished = true;
        // if (this.historyOrderList.length >= 3) {
        //   this.finished = true;
        // }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 查看订单详情
    toDetail(order) {
      this.$router.push({ name: "orderDetail", params: { order: order } });
    },
    getHistoryOrders() {
      var formData = new FormData();
      formData.append("userId", this.userInfo.userId);
      orderApi.getHistoryOrders(formData).then((response) => {
        console.log("getHistoryOrders", response.data.data);
        this.historyOrderList = response.data.data;
      });
    },
    totalCount(order) {
      var sum = 0;
      for (let index = 0; index < order.commodityList.length; index++) {
        const element = order.commodityList[index];
        sum = parseInt(sum) + parseInt(element.count);
      }
      return sum;
    },
  },
};
</script>

<style scoped>
.historyOrder {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 下拉刷新 */
::v-deep .van-pull-refresh {
  overflow: scroll;
}
.orderCard {
  width: 100%;
  min-height: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0.5rem;
  margin-top: 0.1rem;
}
.orderCard .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  widows: 100%;
}
.orderCard .header .left {
  display: flex;
  flex-direction: column;
  margin-right: 0.3rem;
}
.orderCard .header .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.orderCard .header .left .storeName {
  font-size: 16px;
  color: #333;
}
.orderCard .header .left .endTime {
  font-size: 11px;
  color: gray;
}
.orderCard .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.orderCard .main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  widows: 100%;
  margin-top: 0.3rem;
}

.orderCard .main .left {
  width: 15%;
  min-height: 1.5rem;
}
.orderCard .main .middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0.3rem;
}
.orderCard .main .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}
.orderCard .main .right .price {
  font-size: 16px;
  color: #333;
}
.orderCard .main .right .count {
  font-size: 12px;
  color: gray;
  min-height: 0.8rem;
  margin-top: 0.1rem;
}
.orderCard .footer {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.orderCard .footer .left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 30%;
  line-height: 0.8rem;
  font-size: 14px;
}
.orderCard .footer .right {
  border-radius: 2px;
  width: 2.4rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border: 1px solid #dba871;
  color: #dba871;
  font-size: 14px;
}
</style>